---
type: tutorial
title: Faça um componente de Navegação reutilizável
description: |-
  Tutorial: Construa seu primeiro blog Astro —
  Substitua elementos repetidos em múltiplas páginas com um componente reutilizável
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';



Agora que você tem o mesmo HTML escrito em múltiplas páginas do seu site Astro, é hora de substutuir esse conteúdo duplicado com um componente Astro reutilizável!

<PreCheck>
  - Criar uma nova pasta para componentes
  - Construir um componente Astro para mostrar seus links de navegação
  - Substituir HTML existente com um novo, e reutilizável componente de navegação
</PreCheck>

## Crie uma nova pasta `src/components/`

Para guardar arquivos `.astro` que irão gerar HTML mas que não se tornarão novas páginas no seu website, você irá precisar de uma nova pasta no seu projeto: `src/components/`. 


## Crie um componente de Navegação

1. Crie um novo arquivo: `src/components/Navigation.astro`.

2. Copie os seus links para navegar entre páginas do topo de qualquer página e os cole em seu novo arquivo, `Navigation.astro`:

    ```astro title="src/components/Navigation.astro" "---"
    ---
    ---
    <a href="/">Início</a>
    <a href="/about/">Sobre</a>
    <a href="/blog/">Blog</a>
    ```
    :::tip
    Se não tiver nada no frontmatter do seu arquivo `.astro`, você não precisar escrever as cercas de código. Você pode sempre adicioná-las de volta quando necessário.
    :::

### Importe e utilize Navigation.astro

1. Volte para `index.astro` e importe o seu novo componente dentro da cerca de código:

    ```astro title="src/pages/index.astro"
    ---
    import Navigation from '../components/Navigation.astro';
    ---
    ```

2. Então abaixo, substitua os elementos HTML de navegação por links existente com o novo componente de navegação que você acabou de importar:

    ```astro title="src/pages/index.astro" del={1-3} ins={4}
    <a href="/">Início</a>
    <a href="/about/">Sobre</a>
    <a href="/blog/">Blog</a>
    <Navigation />
    ```

3. Verifique a pré-visualização no seu navegador e note que ele deve se parecer exatamente o mesmo... e é isso o que você deseja! 

Seu site contêm o mesmo HTML de antes. Porém agora, essas três linhas de código são fornecidas pelo componente
`<Navigation />`. 

<Box icon="puzzle-piece">

## Tente você mesmo - Adicione navegação ao resto do seu site

Importe e utilize o componente `<Navigation />` nas outras duas páginas do seu site (`about.astro` e `blog.astro`) utilizando o mesmo método.

Não se esqueça de
- Adicionar uma declaração de importação ao topo do script do componente, dentro da cerca de código.
- Substituir o código existente com o componente de navegação.

</Box>

:::note
Quando você reestrutura o seu código mas não muda a forma que a sua página aparece no navegador, você está **refatorando**. Você irá **refatorar** diversas vezes nesta unidade conforme você substitui partes do HTML da sua página com componentes. 

Isso te permite começar rapidamente com um código funcional, geralmente duplicado através do seu projeto. Então, você pode melhorar o design do seu código existente incrementalmente sem mudar a aparência externa do seu site.
:::



<Box icon="question-mark">

### Teste seu conhecimento



1. Você pode fazer isso quando você tem elementos repetidos em múltiplas páginas:
    <MultipleChoice>
      <Option>
        reiniciar o servidor de desenvolvimento
      </Option>
      <Option isCorrect>
        refatorar para utilizar um componente reutilizável
      </Option>
      <Option>
        criar uma nova página
      </Option>
    </MultipleChoice>

2. Componentes Astro são:
    <MultipleChoice>
      <Option>
        reutilizáveis
      </Option>
      <Option>
        fragmentos de HTML
      </Option>
      <Option isCorrect>
        ambas as opções acima!
      </Option>
    </MultipleChoice>

3. Componentes Astro irão automaticamente criar uma nova página no seu site quando você...
    <MultipleChoice>
      <Option>
        incluir `<html></html>`
      </Option>
      <Option>
        refatorar
      </Option>
      <Option isCorrect>
        colocar o arquivo `.astro` em `src/pages/`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Eu posso refatorar conteúdo em componentes reutilizáveis.
- [ ] Eu posso adicionar um novo componente em uma página `.astro`.
</Checklist>

</Box>

### Recursos 

- [Visão Geral sobre Componentes Astro](/pt-br/basics/astro-components/)

- [Refatoração](https://refactoring.com/) <Badge>externo</Badge>
